<template>
  <view class="member">
    <Back title="会员中心"
          :status='true'
          @jump='jump' />
    <view class="member_header">
      <view class="member_header_top">
        <view class="member_header_content">
          <view class="top">
            <image :src="userDate.avatar"
                   mode="scaleToFill"
                   class="avatars" />
            <view class="top_right">
              <view class="name">{{userDate.nickname}}</view>
              <view class="num">
                <image src="https://pockets.qixdian.cn/upload/20240711/668f8567f2b56.png"
                       mode="widthFix"
                       class="icon" />
                <view>
                  VIP{{userDate.level_id}}
                </view>
              </view>
            </view>
          </view>

        </view>
        <view class="member_header_content">
          <view class="rightfalse"
                v-if="userDate.vip_sign_status == 0">
            充值后签到
          </view>
          <view class="right"
                v-if="userDate.vip_sign_status == 1"
                @click="memberSign">
            签到领金币
          </view>
          <view class="rightfalse"
                v-if="userDate.vip_sign_status == 2">
            今日已签到
          </view>
        </view>
      </view>
      <view class="process">
        <liu-progressbar :progress="userDate.level_rate"
                         bgColor="#DCA677"
                         color="#4B4447"
                         dsColor='#4B4447'
                         :height="'30rpx'"
                         borderRadius='20rpx' />
        <view class="process_flex">
          <view>
            <view class="process_flow">{{userDate.level_info}} </view>
            <view class="process_flow">{{userDate.ext_info}} </view>
          </view>
          <view class="process_right">
            {{userDate.grow_value}}/{{userDate.total_pay}}
          </view>
        </view>
      </view>
    </view>
    <view class="member_box">
      <view class="member_box_form">
        <view class="left">等级</view>
        <view class="center">达标流水</view>
        <view class="right">签到金币</view>
      </view>

      <view :class="index%2==0?'member_box_List1':'member_box_List'"
            v-for="(item, index) in userLevelData"
            :key="index">
        <view class="left">
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8567f2b56.png"
                 mode="widthFix"
                 class="icon" /> VIP{{item.level_id}}
        </view>
        <view class="center">{{item.total_pay}}</view>
        <view class="right">{{item.daily_value}}</view>
      </view>
    </view>

  </view>
</template>

<script>
import Back from '../../../components/back'

export default {
  components: {
    Back
  },
  data () {
    return {
      userDate: {},
      token: '',
      userLevelData: []
    }
  },
  onShow () {
    this.token = uni.getStorageSync('token')
    if (this.token) {
      this.getUsers()
      this.getUserLevels();
    }
  },
  methods: {
    //  返回上级
    jump () {
      uni.switchTab({ url: '/pages/user/user' })
    },
    // 签到
    memberSign () {
      this.userDate.vip_sign_status = 2;
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.$Request.post(this.$api.user.userVipSign).then((res) => {
        uni.hideLoading()
        if (res.code == 200 || res.code == 304) {
          uni.showToast({
            title: '签到成功',
            icon: 'none',
            mask: true
          })
          this.getUsers()
        }
      })
    },
    getUserLevels () {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.$Request.get(this.$api.user.userLevels).then((res) => {
        uni.hideLoading()
        if (res.code == 200 || res.code == 304) {
          this.userLevelData = res.data
        }
      })
    },
    // 用户信息
    getUsers () {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.$Request.get(this.$api.user.userShow).then((res) => {
        uni.hideLoading()
        if (res.code == 200) {
          this.userDate = res.data
          if (this.userDate) {
            uni.setStorageSync('nickname', this.userDate.nickname)
            uni.setStorageSync('avatar', this.userDate.avatar)
            uni.setStorageSync('user_id', this.userDate.id)
          }
        }
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.member {
  width: 100vw;
  min-height: 100vh;
  /* #ifdef APP-PLUS */
  padding: 100rpx 20rpx 0;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding: 150rpx 20rpx 0;
  /* #endif */
  box-sizing: border-box;
  position: relative;
  background: #060a16;
  .member_header {
    width: 690rpx;
    // height: 320rpx;
    margin: 30rpx auto;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 30rpx;
    color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    .member_header_top {
      display: flex;
      justify-content: space-between;
    }
    .member_header_content {
      margin-top: 10rpx;
      .top {
        display: flex;
        align-items: center;
        .avatars {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 30rpx;
        }
        .top_right {
          .name {
            height: 28rpx;
            font-family: PingFang SC;
            font-size: 28rpx;
            color: #dca677;
          }
          .num {
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #dca677;
            .icon {
              width: 28rpx;
              margin-right: 20rpx;
            }
          }
        }
      }
      .right {
        width: 120rpx;
        height: 40rpx;
        background: linear-gradient(90deg, #feddbe, #dca677);
        border-radius: 10rpx;
        text-align: center;
        line-height: 40rpx;
        color: #2c2b3a;
        font-size: 20rpx;
      }
      .rightfalse {
        width: 120rpx;
        height: 40rpx;
        background: #999;
        border-radius: 10rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 20rpx;
      }
    }
  }
  .process {
    margin-top: 30rpx;
    .process_flow {
      height: 28rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #dca677;
      margin-left: 15rpx;
      margin-top: 15rpx;
    }
    .process_flex {
      display: flex;
      justify-content: space-between;
    }
    .process_right {
      font-size: 20rpx;
      margin-top: 15rpx;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #dca677;
    }
  }
  .member_box {
    width: 690rpx;
    margin-top: 50rpx;
    //   height: 1048rpx;
    background: linear-gradient(210deg, #2c2b3a, #1b1b26);
    border-radius: 20rpx;
    .member_box_form {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      background: #4e4d5f;
      padding: 0 30rpx;
      box-sizing: border-box;
      color: #fff;
      font-size: 26rpx;
      text-align: center;

      .left,
      .center,
      .right {
        width: 33%;
      }
    }
    .member_box_List {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      background: #4e4d5f;
      padding: 0 30rpx;
      box-sizing: border-box;
      color: #fff;
      font-size: 26rpx;
      text-align: center;
      .left {
        width: 33%;
        color: #dca677;
        .icon {
          width: 28rpx;
          margin-right: 10rpx;
        }
      }
      .center,
      .right {
        width: 33%;
      }
    }
    .member_box_List1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      //   background: #4e4d5f;
      padding: 0 30rpx;
      box-sizing: border-box;
      color: #fff;
      font-size: 26rpx;
      text-align: center;
      .left {
        width: 33%;
        color: #dca677;
        .icon {
          width: 28rpx;
          margin-right: 10rpx;
        }
      }
      .center,
      .right {
        width: 33%;
      }
    }
  }
}
</style>
